<template>
  <div class="admin-page">
    <!-- header -->
    <el-header :height="'64px'" class="header-page" style="-webkit-app-region: drag">
      <!-- 标志 -->
      <div class="logo-box">
        <img class="logo-img" src="../../assets/images/logo.png" alt />
      </div>

      <!-- 下拉菜单 -->
      <el-dropdown class="my-el-dropdown" style="-webkit-app-region: no-drag" @command="handleCommand">
        <div class="el-dropdown-link">
          <img class="user-avatar" src="../../assets/images/header/userDefaultAvatar.png" alt="" />
          <span class="nick-name can-not-select" v-text="adminInfo.nickname"></span>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="currentMode === 'web'" command="toggleBig">
            <i class="el-icon-full-screen"></i>
            切换大小
          </el-dropdown-item>
          <el-dropdown-item command="modifyPwd">
            <i class="el-icon-edit"></i>
            修改密码
          </el-dropdown-item>
          <el-dropdown-item command="logout">
            <i class="fa fa-sign-out" aria-hidden="true"></i>
            退出系统
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--electron 最大|最小|关闭 -->
      <div v-if="currentMode === 'electron'" style="-webkit-app-region: no-drag" class="menu">
        <div class="icon-smaller" @click="minimizeWindow()">
          <hr class="smaller" />
        </div>
        <div class="icon-bigger" @click="maximizeWindow()">
          <div class="bigger"></div>
        </div>
        <div class="icon-close" @click="hiddenWindow()">
          <div class="close"></div>
        </div>
      </div>
      <!-- 修改密码 -->
      <el-dialog title="修改密码" :visible.sync="modifyPwdDialog">
        <el-form ref="ruleForm" :model="form" :rules="rules">
          <el-form-item label="老密码" :label-width="formLabelWidth" prop="oldPwd" required>
            <el-input
              v-model="form.oldPwd"
              type="password"
              autocomplete="off"
              clearable
              show-password
              placeholder="请输入老的密码"
              minlength="6"
              maxlength="30"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPwd" required>
            <el-input
              v-model="form.newPwd"
              type="password"
              autocomplete="off"
              clearable
              placeholder="请输入新的密码"
              show-password
              minlength="6"
              maxlength="30"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="modifyPwdDialog = false">取 消</el-button>
          <el-button type="primary" @click="modifyPwd">确 定</el-button>
        </div>
      </el-dialog>
    </el-header>
    <el-container class="el-container">
      <!-- aside -->
      <ul class="navs-list scroll">
        <li
          v-for="(nav, index) in adminNavs"
          :key="index"
          class="aside-nav can-not-select"
          :class="{ 'nav-chose': currentNav === nav.navPath }"
          @click="setNav(nav)"
        >
          <i class="fa-lg" :class="nav.navIcon"></i>
          <span v-text="nav.navName"></span>
        </li>
      </ul>
      <!-- main -->
      <el-main class="main-page">
        <!-- 主页面 -->
        <component :is="currentNav"></component>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { editPassword } from '@/api/httpApiAdmin'

const accountManagement = () => import(/* webpackChunkName: "admin" */ './components/AccountManagement')
const commonReplies = () => import(/* webpackChunkName: "admin" */ './components/CommonReplies')
const commonTags = () => import(/* webpackChunkName: "admin" */ './components/CommonTags')
const devicesManagement = () => import(/* webpackChunkName: "admin" */ './components/DevicesManagement')
const versionControl = () => import(/* webpackChunkName: "admin" */ './components/VersionControl')
const messageLog = () => import(/* webpackChunkName: "admin" */ './components/MessageLog')
const mobilePhoneMonitor = () => import(/* webpackChunkName: "admin" */ './components/MobilePhoneMonitor')
const dataStatistics = () => import(/* webpackChunkName: "admin" */ './components/DataStatistics')
const customerManagement = () => import(/* webpackChunkName: "admin" */ './components/SuperCustomerManagement')
const phoneNumber = () => import(/* webpackChunkName: "admin" */ './components/PhoneNumber.vue')
const phonesManagementSuper = () => import(/* webpackChunkName: "admin" */ './components/SuperPhonesManagement')
const robotManagement = () => import(/* webpackChunkName: "admin" */ './components/RobotManagement.vue')
const blackManagement = () => import(/* webpackChunkName: "admin" */ './components/BlackManagement.vue')
export default {
  components: {
    accountManagement,
    commonReplies,
    commonTags,
    devicesManagement,
    versionControl,
    messageLog,
    mobilePhoneMonitor,
    customerManagement,
    phoneNumber,
    phonesManagementSuper,
    dataStatistics,
    robotManagement,
    blackManagement
  },
  data() {
    const validateOldPwd = (rule, value, callback) => {
      const reg = /^[0-9a-z]{6,16}$/gi
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('密码长度6-16位,必须是数字或字母!'))
      }
    }
    const validateNewPwd = (rule, value, callback) => {
      const reg = /^[0-9a-z]{6,16}$/gi
      if (reg.test(value)) {
        if (value === this.form.oldPwd) {
          callback(new Error('新密码不能和老密码一样!'))
        }
        callback()
      } else {
        callback(new Error('请输入新密码'))
      }
    }
    return {
      modifyPwdDialog: false, // 展示修改密码
      formLabelWidth: '80px', // 展示修改密码
      form: {
        oldPwd: '',
        newPwd: ''
      }, // 密码表单
      rules: {
        oldPwd: [{ validator: validateOldPwd, trigger: 'blur' }],
        newPwd: [{ validator: validateNewPwd, trigger: 'blur' }]
      }, // 密码校验
      adminNavs: [
        {
          navName: '客服账号分配',
          navIcon: 'el-icon-service',
          navPath: 'accountManagement'
        },
        {
          navName: '手机设备管理',
          navIcon: 'el-icon-mobile-phone',
          navPath: 'devicesManagement'
        },
        {
          navName: '公共术语管理',
          navIcon: 'el-icon-chat-line-square',
          navPath: 'commonReplies'
        },
        {
          navName: '公共标签管理',
          navIcon: 'el-icon-collection-tag',
          navPath: 'commonTags'
        },
        {
          navName: '版本控制管理',
          navIcon: 'el-icon-sunny',
          navPath: 'versionControl'
        },
        {
          navName: '微信聊天记录',
          navIcon: 'el-icon-s-order',
          navPath: 'messageLog'
        },
        {
          navName: '通话短信监控',
          navIcon: 'el-icon-aim',
          navPath: 'mobilePhoneMonitor'
        },
        {
          navName: '号码库管理',
          navIcon: 'el-icon-phone-outline',
          navPath: 'phoneNumber'
        },
        {
          navName: '后台数据统计',
          navIcon: 'el-icon-s-data',
          navPath: 'dataStatistics'
        },
        {
          navName: '机器人管理',
          navIcon: 'el-icon-s-custom',
          navPath: 'robotManagement'
        },
        {
          navName: '黑名单管理',
          navIcon: 'el-icon-s-custom',
          navPath: 'blackManagement'
        }
      ],
      currentNav: 'accountManagement'
    }
  },
  computed: {
    ...mapState({
      adminInfo: 'adminInfo',
      currentMode: 'currentMode'
    }),
    ...mapGetters({
      superAdmin: 'superAdmin' // 超级管理员
    })
  },
  created() {
    // r如果是管理端
    if (this.superAdmin) {
      this.adminNavs = []
      this.adminNavs.push({
        navName: '客户账号列表',
        navIcon: 'el-icon-s-custom',
        navPath: 'customerManagement'
      })
      this.adminNavs.push({
        navName: '手机设备状态',
        navIcon: 'el-icon-mobile-phone',
        navPath: 'phonesManagementSuper'
      })
    }
  },
  methods: {
    // 处理下拉菜单
    handleCommand(command) {
      switch (command) {
        case 'logout':
          // 退出之前需要二次确认
          this.$confirm('你将退出登录 ?', '提示', {
            closeOnClickModal: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              // 清除token
              this.$store.commit('SET_HTTP_TOKEN', '')
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
          break
        case 'modifyPwd':
          this.modifyPwdDialog = true
          break
        case 'toggleBig':
          this.$store.commit('SET_BIG_SCREEN')
          break
        default:
          this.$message('click on item ' + command)
          break
      }
    },
    // 修改密码
    modifyPwd() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const id = this.adminInfo.id
          editPassword(id, this.form.oldPwd, this.form.newPwd).then((res) => {
            if (res.code === 0) {
              this.modifyPwdDialog = false
              this.$message({
                type: 'success',
                message: '修改密码成功!',
                duration: 1000
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 最小化
    minimizeWindow() {
      this.$ipcRenderer.send('operations', 'min')
    },
    // 最大化
    maximizeWindow() {
      this.$ipcRenderer.send('operations', 'max')
    },
    // 自定义窗口操作
    hiddenWindow() {
      this.$ipcRenderer.send('operations', 'hidden')
    },
    // ======================
    // 设置当前的nav
    setNav(nav) {
      this.currentNav = nav.navPath
    }
  }
}
</script>

<style lang="scss" scoped>
.admin-page {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: solid #c3c3c3 1px;
  display: flex;
  flex-direction: column;
}

.header-page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  border-bottom: solid #c3c3c3 1px;
  .logo-box {
    display: flex;
    align-items: center;
    .logo-img {
      width: 132px;
      height: 49px;
    }
  }
  .my-el-dropdown {
    .el-dropdown-link {
      display: flex;
      align-items: center;
      color: #333333;
      text-align: center;
      .user-avatar {
        width: 27px;
        height: 27px;
      }
      .nick-name {
        font-size: 16px;
        margin: 0 5px;
      }
    }
  }

  .menu {
    width: 100px;
    height: 20px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    justify-content: space-between;
    .icon-smaller,
    .icon-bigger {
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      .bigger {
        width: 10px;
        height: 10px;
        border: solid white 1px;
      }
      .smaller {
        width: 10px;
        border: solid white 1px;
      }
      &:hover {
        background: #c3c3c3;
      }
    }
    .icon-close {
      width: 20px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
      .close {
        position: relative;
        width: 2px;
        height: 15px;
        background: #fff;
        transform: rotate(45deg);
        display: inline-block;
      }
      .close:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 15px;
        background: #fff;
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
      }
      &:hover {
        background: red;
      }
    }
  }

  ::v-deep .el-dialog {
    width: 500px;
  }
}

.el-container {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;

  .navs-list {
    width: 150px;
    min-width: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: solid #c3c3c3 1px;
    display: flex;
    flex-direction: column;
    .aside-nav {
      padding: 16px 10px;
      color: $font-color-2;
      cursor: pointer;
      &:hover {
        background-color: rgba($color: #000000, $alpha: 0.1);
      }
      .fa-lg {
        margin-right: 5px;
      }
    }
    .nav-chose {
      background: #edf3ff;
      color: #e6a23c;
      &:hover {
        background: #edf3ff;
      }
    }
  }
  .main-page {
    padding: 5px;
  }
}
</style>
